<template>
	<view>
		<view>
			<view class="dormitoryNav">
				<view style="font-weight: 800;">全部信息
					<view class="leaveLine" ></view>
				</view>
			</view>
			<view v-for="(item,index) in maintenanceList"  @click="newMaintenanceFun(item)">
				<view class="mainContentWrap" style="display: flex;">
					<view style="flex-direction: row;width:45%" >
						<view style="margin-top:20rpx;color:#0000FF;font-weight: 800;font-size: 30rpx;">
							<span class="iconfont icon-shouye-shouye" style="font-size: rpx;margin-right:20rpx;color:#0000FF"></span>  
							{{item.dormitoryNo}}
						</view>
						<view style="margin-top:5px;color:#8F8F94;font-size:16px;">({{item.deviceName}})</view>
					</view>
					
					<view style="flex-direction: row;width:50%">
						<view style="margin-top: 20rpx; color:#8F8F94;font-size: 28rpx;text-align: right;color: green;">处理完 ></view>
						 <view style="margin-top:5px;color:#8F8F94;font-size: 15px;text-align: left">
							{{item.repairDate}}						
						 </view>
					 
					</view>
					
				</view>
				<view class="timePos" v-show="item.isShow">
					<view  style="color:#8F8F94;font-size: 28rpx;">
						<span >
							报修细节情况：
						</span>	
						<view>{{item.repairDesc}}</view>
					</view>
										
				</view>
			</view>
		<view v-for="(item,index) in classList"  @click="newMaintenanceFun(item)">
			<view class="mainContentWrap">
				<view style="margin-top:30rpx;color:#0000FF;font-weight: 800;font-size: 30rpx;width:200rpx;">
					<span class="iconfont icon-shouye-shouye" style="font-size: 32rpx;margin-right:20rpx;color:#0000FF"></span>  
					{{item.className}}
				</view>
				<view style="margin-top:40rpx;color:#8F8F94;font-size:24rpx;">({{item.deviceName}})</view>
				<view style="margin-top:20rpx;color:#8F8F94;font-size: 28rpx;width:180rpx;">
					{{item.repairDate}}						
				</view>
				<view style="margin-top: 40rpx; color:#8F8F94;font-size: 24rpx;text-align: right;">处理完></view>
			</view>
			<view class="timePos" v-show="item.isShow">
				<view  style="color:#8F8F94;font-size: 28rpx;">
					<span >
						报修细节情况：
					</span>	
					<view>{{item.repairDesc}}</view>
				</view>
									
			</view>
		</view>
		</view>
		<!-- <my-bottom :topName="topName" :bottomArr="attendanceArr" :bottomName="bottomName"></my-bottom>		 -->
	</view>
</template>

<script>
	import topCom from '../component/topCom.vue'
	import bottomCom from '../component/bottom.vue'
	import headTitle from '../component/btnHeadeCom.vue'
	export default {
		name:'leveRegistration',
		data(){
			return{
				isShowTitle:true,
				isShowList:false,
				userName:"维修",
				topName:'历史维修记录',
				titleHead:'历史维修记录',
				bottomName:'after',
				maintenanceList:[{
					class:'202',
					address:'畔湖苑',
					time:'2022-03-5',
					msg:'1、电器损坏',
					isShow:false
				},{
					class:'203',
					address:'畔湖苑',
					time:'2022-03-6',
					msg:'1、水龙头损坏',
					isShow:false
				},],
				attendanceArr:[ 
					{
					    name:'home',
					    icon:'iconfont icon-yonghutongji',
					    text:"首页",
					    path: '/pages/maintenance/maintenanceIndex'
					},
					
					{
					    name:'maintenance',
					    icon:'iconfont icon-shezhi',
					    text:"退出",
					    path: '/pages/index/login'
					},
				],
				classList:[],
			}
		},
		components:{
			topCom,
			bottomCom,
			headTitle,
		},
		mounted(){
			this.getAppHistoryRepList()
			// this.getAppHistoryClassRepList()
		},
		methods:{
			getAppHistoryRepList(){
				this.$api.maintenance.getAppHistoryRepList().then(res=>{
					this.maintenanceList = res.data
					this.maintenanceList.forEach((item,index)=>{
						item.dormitoryNo = `${item.buildingNo}${item.dormitoryNo}`
						item.isShow = false
					})
				})
			},
			getAppHistoryClassRepList(){
				this.$api.maintenance.getAppHistoryClassRepList().then(res=>{
					this.classList = res.data
					this.classList.forEach((item)=>{
						item.className = `${item.className}`
						item.isShow = false
					})
				})
			},
			newMaintenanceFun(item){
				this.$forceUpdate()
				item.isShow = !item.isShow
			},
		}
	}
</script>

<style>
	.timePos{
		position: relative;
		top: 0rpx;
		right: -30rpx;
		background: white;
		border: 1px solid #cccc;
		border-radius: 20rpx;
		padding:20rpx;
		width:620rpx;
		margin-bottom: 20rpx;
	}
	.leaveBtn{
		background-image: url(https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/tubiao-01.png);
		background-size: 100%;
		background-repeat: no-repeat;
		width:190upx;
		height:60upx;
		color:white;
		font-size: 26upx;
		font-weight: 0;
	}
	.mainContentWrap{
		border:#8F8F94 solid 0rpx;
		height: 120rpx;
		border-radius: 20rpx;
		margin-top:30rpx;
		width:95%;
		margin-left:20rpx;
		margin-right: 20rpx;
		box-shadow: 0upx 0upx 10upx 0upx #8F8F94;
		display: flex;
		justify-content: space-around;
		align-content: space-around;
		
	}
	.dormitoryNav{
				color:#0000FF;
				margin-left:80rpx;
				margin-top: 30rpx;		
			}
			.leaveLine{
				width:200upx;
				height:8upx;
				background:rgba(239, 220, 11, 1.0);
				opacity:0.78;
				position: relative;
				bottom: -10rpx;
				left:-30upx;
			}
	.attBtn1{
		margin-right:4rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin-top:-20rpx;		
	}
	.leaveNav{
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
		font-size: 36upx;
		color:blue;
		width:100%;
		padding:50upx
	}
	.leaveBtn{
		background-image: url(https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/tubiao-01.png);
		background-size: 100%;
		width:190upx;
		height:60upx;
		color:white;
		font-size: 26upx;
		font-weight: 0;
	}
	.leaveLine{
		width:200upx;
		height:8upx;
		background:rgba(239, 220, 11, 1.0);
		opacity:0.78;
		position: relative;
		bottom: -10upx;
		left:-30upx;
	}
	.leaveMgm{
		color:#808080;
		font-size: 28upx;
	}
	.leaveCheck{
		margin-left:60upx;
		margin-bottom: 30upx;
		
	}
	.attBtnFontSlec{
		border:solid #007AFF !important ;border-radius: 15upx;font-size: 20upx;
		color:white;
		background-color: #007AFF;
	}
	.attBtnFont{
		border:solid #808080 0rpx !important;;font-size: 20upx;
	}
	.attBtnFont1{
		border:solid #808080 0rpx !important;;font-size: 20upx;
		padding-left: 18rpx !important;
		padding-right: 18rpx !important;
	}
	.attLine{
		width:700upx;
		height:3upx;
		background:rgba(239, 237, 236, 1.0);
		opacity:0.78;
		position: relative;
		bottom: 10upx;
		left:0upx;
	}
	.attBtn{
		width:60%;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin-top:-20upx;
		
	}
	.leaveBtn{
		background-image: url(https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/tubiao-01.png);
		width:190upx;
		height:60upx;
		color:white;
		font-size: 26upx;
		font-weight: 0;
	}
	.leaveLine{
		width:200upx;
		height:8upx;
		background:rgba(239, 220, 11, 1.0);
		opacity:0.78;
		position: relative;
		bottom: -10rpx;
		left:-30upx;
	}
	.leaveMgm{
		color:#808080;
		font-size: 28upx;
	}
	.leaveCheck{
		margin-left:60upx;
		margin-bottom: 30upx;		
	}
	.checkout{
		display: flex;
		justify-content: space-around;
		align-content: space-between;
	}
	.leaveTabLine{
		width:3upx;
		height:60upx;
		background:#8F8F94;
		opacity:0.78;
		position: relative;
		top: 0upx;
		left:150upx;
	}
</style>
